import React, { Component } from 'react'
import echarts from 'echarts'
import 'echarts/map/js/china'
import geoJson from 'echarts/map/json/china.json'
// import { geoCoordMap, provienceData } from './geo'
import { BorderBox1 ,BorderBox8 ,BorderBox13,Decoration1 ,ScrollBoard,ScrollRankingBoard } from '@jiaminghi/data-view-react'
// import { Decoration9 ,Loading} from '@jiaminghi/data-view-react'
import './index.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      topdata:{
        data: [
          { "name": "", "value": "膜丝/膜片" },
          { "name": "", "value": "曝气管（穿孔管/软管）" },
          { "name": "", "value": "膜壳（压力容器）" },
          { "name": "", "value": "真空压力表" },
          { "name": "", "value": "污泥回流泵" },
          { "name": "", "value": "在线浊度仪" },
          { "name": "", "value": "曝气风机（罗茨/离心）" },
          { "name": "", "value": "膜架（不锈钢）" },
          { "name": "", "value": "化学清洗泵" },
          { "name": "", "value": "电磁流量计" },
          { "name": "", "value": "空气过滤减压阀" },
          { "name": "", "value": "膜格栅（细格栅）" },
          { "name": "", "value": "真空泵（抽吸系统）" },
          { "name": "", "value": "PLC模块" },
          { "name": "", "value": "溶解氧探头" },
          { "name": "", "value": "气动阀门执行器" },
          { "name": "", "value": "UF/RO保安过滤器滤芯" },
          { "name": "", "value": "加药计量泵隔膜" },
          { "name": "", "value": "紫外杀菌灯管" },
          { "name": "", "value": "管式橡胶接头" }
        ],
      carousel: 'page'},
    tabledata:{
      header: ['监测点', '检测项目', '检测数据'],
      data: [
        ['膜池曝气支管', '瞬时气流量', '12.5 m³/h'],
        ['抽吸泵出口', '跨膜压差(TMP)', '32.1 kPa'],
        ['膜组件产水管', '浊度', '0.45 NTU'],
        ['好氧池末端', '溶解氧(DO)', '6.8 mg/L'],
        ['混合液回流管', '污泥浓度(MLSS)', '4200 mg/L'],
        ['膜清洗液循环管', 'PH值', '7.2'],
        ['进水泵前', '悬浮物(SS)', '120 mg/L'],
        ['真空泵排气口', '振动速度', '2.3 mm/s'],
        ['膜架气水界面', '温度', '24.6 ℃'],
        ['产水总管', '电导率', '325 μS/cm'],
        ['曝气主管', '压力', '0.18 MPa']
      ],
      index: true,
      columnWidth: [50],
      align: ['center']
    }
    }
  }
  componentDidMount() {
    this.initalECharts1()
    this.initalECharts2()
    this.initalECharts3()
    this.echarts_3()

    // this.initalECharts7()
  }

  // 工厂水质监测点分布占比
  initalECharts3() {
    this.setState(
        { myChart4: echarts.init(document.getElementById('countyMap')) },
        () => {
          this.state.myChart4.setOption({
            color: ['#80DEEA', '#4FC3F7', '#0A2370', '#03A9F4', '#00BCD4'],
            legend: {
              top: 30,
              data: ['工艺', '饮水', '冷却', '清洗', '其他'],
              textStyle: {
                fontSize: 12,
                color: '#ffffff'
              },
              icon: 'circle',
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 10
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#07234d']
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff',
                  fontSize: 12
                }
              }
            },
            yAxis: {
              type: 'category',
              data: ['车间A', '车间B', '办公区', '仓储区', '废水', '锅炉', '质检'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff',
                  fontSize: 12
                }
              }
            },
            series: [
              {
                name: '工艺',
                type: 'bar',
                stack: '总量',
                label: {
                  show: false,
                  position: 'insideRight'
                },
                data: [220, 180, 100, 150, 130, 160, 140]
              },
              {
                name: '饮水',
                type: 'bar',
                stack: '总量',
                label: {
                  show: false,
                  position: 'insideRight'
                },
                data: [80, 100, 120, 60, 40, 50, 90]
              },
              {
                name: '冷却',
                type: 'bar',
                stack: '总量',
                label: {
                  show: false,
                  position: 'insideRight'
                },
                data: [150, 140, 80, 100, 90, 120, 70]
              },
              {
                name: '清洗',
                type: 'bar',
                stack: '总量',
                label: {
                  show: false,
                  position: 'insideRight'
                },
                data: [100, 90, 60, 80, 70, 60, 50]
              },
              {
                name: '其他',
                type: 'bar',
                stack: '总量',
                label: {
                  show: false,
                  position: 'insideRight'
                },
                data: [50, 60, 40, 30, 70, 40, 30]
              }
            ]
          });

          // 自动选中“工艺”和“饮水”
          const legendNamesToSelect = ['工艺', '饮水'];
          legendNamesToSelect.forEach(name => {
            this.state.myChart4.dispatchAction({
              type: 'legendSelect',
              name
            });
          });

          // 自动隐藏“清洗”和“其他”
          const legendNamesToHide = ['清洗', '其他'];
          legendNamesToHide.forEach(name => {
            this.state.myChart4.dispatchAction({
              type: 'legendUnselect',
              name
            });
          });
        }
    );
  }

  // 水质监测点关键指标排名
  initalECharts2() {
    this.setState(
        { myChart3: echarts.init(document.getElementById('cityMap')) },
        () => {
          this.state.myChart3.setOption({
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#80DEEA'
                },
                {
                  offset: 1,
                  color: '#00d0b1'
                }
              ],
              globalCoord: false
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'value',
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: ['#03A9F4']
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#c3dbff',
                    fontSize: 12
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'category',
                data: ['质检中心', '锅炉房', '废水区', '仓储区', '车间B', '车间A'],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#c3dbff',
                    fontSize: 12
                  }
                }
              }
            ],
            series: [
              {
                name: '异常次数',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 80, 120, 180, 210]
              }
            ]
          })
        }
    )
  }

  // 某工厂内不同区域水质监测点数量占比
  initalECharts1() {
    // 准备多组轮播数据
    const dataSets = [
      [
        { value: 335, name: '车间A' },
        { value: 310, name: '车间B' },
        { value: 234, name: '办公区' },
        { value: 135, name: '废水区' },
        { value: 548, name: '仓储区' }
      ],
      [
        { value: 400, name: '车间A' },
        { value: 280, name: '车间B' },
        { value: 200, name: '办公区' },
        { value: 180, name: '废水区' },
        { value: 420, name: '仓储区' }
      ],
      [
        { value: 250, name: '车间A' },
        { value: 350, name: '车间B' },
        { value: 300, name: '办公区' },
        { value: 150, name: '废水区' },
        { value: 500, name: '仓储区' }
      ]
    ];

    // 确保DOM元素存在
    const chartDom = document.getElementById('provinceMap');
    if (!chartDom) {
      console.error('DOM element not found');
      return;
    }

    // 初始化图表
    const myChart = echarts.init(chartDom);

    const option = {
      color: ['#80DEEA', '#2196F3', '#4FC3F7', '#00BCD4', '#203A9F'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        top: 30,
        right: '20%',
        data: ['车间A', '车间B', '办公区', '废水区', '仓储区'],
        textStyle: {
          fontSize: 12,
          color: '#ffffff'
        },
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 10
      },
      series: [
        {
          name: '监测点分布',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['35%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            scale: true,
            scaleSize: 10,
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: dataSets[0],
          // 添加动画配置
          animationType: 'expansion',
          animationEasing: 'elasticOut',
          animationDuration: 1000
        }
      ]
    };

    myChart.setOption(option);

    // 轮播索引
    let currentIndex = 0;
    // 当前高亮的车间索引
    let highlightIndex = 0;

    // 设置定时器，每3秒切换一次数据
    const intervalId = setInterval(() => {
      currentIndex = (currentIndex + 1) % dataSets.length;
      highlightIndex = (highlightIndex + 1) % dataSets[0].length;

      // 更新数据
      option.series[0].data = dataSets[currentIndex];

      // 先取消之前的高亮
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      });

      // 设置新的高亮
      myChart.setOption(option);

      // 延迟一点时间再触发高亮效果，确保图表已经更新
      setTimeout(() => {
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: highlightIndex
        });
      }, 100);

    }, 3000);

    // 保存图表实例和定时器ID到state
    this.setState({
      myChart2: myChart,
      chartIntervalId: intervalId
    });
  }

  componentWillUnmount() {
    // 清理图表和定时器
    if (this.state.myChart2) {
      this.state.myChart2.dispose();
    }
    if (this.state.chartIntervalId) {
      clearInterval(this.state.chartIntervalId);
    }
  }
  echarts_3() {
    const myChart = echarts.init(document.getElementById('echart3'));
    const option = {
      title: {
        text: 'MBR污染曲线',
        left: 'center',
        top: 0,
        textStyle: {
          color: '#1FAEEAFF',
          fontSize: 18
        }
      },
      tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#dddc6b' } } },
      grid: { left: 10, top: 20, right: 30, bottom: 10, containLabel: true },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 14 } },
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.2)' } },
        data: [ '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月']
      }],
      yAxis: [{
        type: 'value',
        axisTick: { show: false },
        splitNumber: 4,
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
        axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 16 } },
        splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)', type: 'dotted' } }
      }],
      series: [{
        name: '污染率',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: { color: 'rgba(31, 174, 234, 1)', width: 2 },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: 'rgba(31, 174, 234, 0.4)'
          }, {
            offset: 0.8, color: 'rgba(31, 174, 234, 0.1)'
          }]),
          shadowColor: 'rgba(0, 0, 0, 0.1)'
        },
        itemStyle: { color: '#1f7eea', borderColor: 'rgba(31, 174, 234, .1)', borderWidth: 5 },
        data: [3, 6, 3, 6, 3, 9, 3, 12, 6, 8, 3, 5, 9, 3]
      }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", () => myChart.resize());
  }

  render() {
    const { topdata ,tabledata} = this.state
    return (
      <div className="data">
        <header className="header_main">
          <div className="left_bg"></div>
          <div className="right_bg"></div>

          <a href="http://1.94.32.221:7120" style={{textDecoration: 'none', color: 'inherit'}}>
            <h3>VitaFlow控制系统——潍柴动力集团</h3>
            {/*<h3>HyperMBR控制系统——潍柴动力集团</h3>*/}
            {/*<h3>AegisMBR控制系统——徐工集团</h3>*/}
          </a>
        </header>
        <div className="wrapper">
          <div className="container-fluid">
            <div className="row fill-h" style={{ display: 'flex' }}>
              <div className="col-lg-3 fill-h" style={{ width: '25%' }}>

                {/*左下角*/}
                <div className="xpanel-wrapper xpanel-wrapper-5">
                  <BorderBox13>
                    <div className="xpanel">
                      <div className="fill-h" id="mainMap1">
                        {/* <Loading style={{color:'#fff'}}>加载中...</Loading> */}
                        <ScrollRankingBoard config={topdata}/>
                      </div>
                    </div>
                  </BorderBox13>
                </div>

                {/*左下角表格*/}
                <div className="xpanel-wrapper xpanel-wrapper-4">
                  <BorderBox13>
                    <div className="xpanel">
                      <div className="fill-h" id="worldMap">
                      <ScrollBoard config={tabledata}  />
                      </div>
                    </div>
                  </BorderBox13>
                </div>
              </div>
              <div className="col-lg-6 fill-h" style={{ width: '50%' }}>
                <div className="xpanel-wrapper xpanel-wrapper-5">
                    <BorderBox13>
                    <iframe
                        src="https://admin.sovitjs.com/publish_2d/3852535872670924808 "
                        width="95%"
                        height="400px"
                        style={{ marginTop: '45px' }}
                        frameBorder="0"
                        allowFullScreen
                    >
                    </iframe>
                    </BorderBox13>
                </div>

                <div
                    className="xpanel-wrapper xpanel-wrapper-4"
                    style={{display: 'flex'}}
                >
                  <div
                      style={{
                        width: '100%',
                        paddingRight: 8,
                        position: 'relative'
                      }}
                  >
                    <BorderBox13>
                          <div className="xpanel">
                            <div className='fill-h' id="echart3"></div>
                          </div>
                    </BorderBox13>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 fill-h" style={{ width: '25%' }}>
                <div
                  className="xpanel-wrapper xpanel-wrapper-6"
                  style={{ position: 'relative' }}
                >
                  <div className="content_title">水质监测点分布占比</div>
                  <BorderBox1>
                    <div className="xpanel">
                      <div className="fill-h" id="provinceMap"></div>
                    </div>
                  </BorderBox1>
                </div>
                <div
                  className="xpanel-wrapper xpanel-wrapper-6"
                  style={{ position: 'relative' }}
                >
                  <div className="content_title">来源计流量</div>
                  <BorderBox1>
                    <div className="xpanel">
                      <div className="fill-h" id="cityMap"></div>
                    </div>
                  </BorderBox1>
                </div>
                <div
                  className="xpanel-wrapper xpanel-wrapper-4"
                  style={{ position: 'relative' }}
                >
                  <div className="content_title">厂区用水类型分布</div>
                  <BorderBox1>
                    <div className="xpanel">
                      <div className="fill-h" id="countyMap"></div>
                    </div>
                  </BorderBox1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
     );
  }
}

export default App;